<template>
	<view class="container">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view class="title-tbar">
			应急救援
		</view>
		<view class="map-temp">
			<map class="map-sty" :latitude="mapData.latitude" :longitude="mapData.longitude" :markers="mapData.covers">
			</map>
		</view>
		<view class="opera-area">
			<!-- <uni-section title="实心标签" type="line"> -->
				<view class="uni-padding-wrap uni-common-mt">
					<uni-segmented-control :current="current" :values="items" :style-type="styleType"
						:active-color="activeColor" @clickItem="onClickItem" />
				</view>
				<view class="content">
					<view v-if="current === 0"><text class="content-text">
						<view class="example">
								<!-- 基础表单校验 -->
								<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">
									<uni-forms-item name="localtion">
										<template v-slot:label>
										    <!-- 自定义标签内容 -->
										    <view class="tag-view">
												位置
											</view>
										  </template>
										<uni-easyinput style="min-width: 450rpx;margin-left: 20rpx; min-height: 20rpx;" v-model="valiFormData.localtion" placeholder="请输入位置" />
									</uni-forms-item>
									<uni-forms-item name="person">
										<template v-slot:label>
										    <!-- 自定义标签内容 -->
										    <view class="tag-view">
												求助人
											</view>
										  </template>
										<uni-easyinput style="min-width: 450rpx;margin-left: 20rpx; min-height: 30rpx;" v-model="valiFormData.person" placeholder="请输入姓名" />
									</uni-forms-item>
									<uni-forms-item name="contact">
										<template v-slot:label>
										    <!-- 自定义标签内容 -->
										    <view class="tag-view">
												联系方式
											</view>
										  </template>
										<uni-easyinput style="min-width: 450rpx;margin-left: 20rpx; min-height: 30rpx;" v-model="valiFormData.contact" placeholder="请输入联系方式" />
									</uni-forms-item>
									<uni-forms-item name="licensePlate">
										<template v-slot:label>
										    <!-- 自定义标签内容 -->
										    <view class="tag-view">
												车牌
											</view>
										  </template>
										<uni-easyinput style="min-width: 450rpx;margin-left: 20rpx; min-height: 30rpx;" v-model="valiFormData.licensePlate" placeholder="请输入车牌号" />
									</uni-forms-item>
									<uni-forms-item name="description">
										<template v-slot:label>
										    <!-- 自定义标签内容 -->
										    <view class="tag-view">
												描述
											</view>
										  </template>
										<uni-easyinput style="min-width: 450rpx;margin-left: 20rpx; min-height: 30rpx;" type="textarea" v-model="valiFormData.description" placeholder="请准确描述当前的状况及所需要的帮助" />
									</uni-forms-item>
								</uni-forms>
								<view class="btn">
									<button style="min-height: 60rpx; border-radius: 45rpx; background-color: #ff7438;" type="primary" @click="submit('valiForm')">呼叫救援</button>
								</view>
								<view class="record">
									<navigator open-type="navigate" class="text-sty" url="/pages/ResucueRecord/ResucueRecord">
										救援记录
									</navigator>
									<view class="arrow">
										
									</view>
								</view>
						</view>
					
					</text></view>
					<view v-if="current === 1"><text class="content-text">
						
						选项卡2的内容
					
					</text></view>
					<view v-if="current === 2">
						<view class="example">
								<!-- 基础表单校验 -->
								<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">
									<uni-forms-item name="startPoint">
										<template v-slot:label>
										    <!-- 自定义标签内容 -->
										    <view class="tag-view">
												起点
											</view>
										  </template>
										<uni-easyinput style="min-width: 450rpx;margin-left: 20rpx; height: 30rpx;" v-model="valiFormData.startPoint" placeholder="请输入起点" />
									</uni-forms-item>
									<uni-forms-item name="endPoint">
										<template v-slot:label>
										    <!-- 自定义标签内容 -->
										    <view class="tag-view">
												终点
											</view>
										  </template>
										<uni-easyinput style="min-width: 450rpx;margin-left: 20rpx; min-height: 20rpx;" v-model="valiFormData.endPoint" placeholder="请输入终点" />
									</uni-forms-item>
									<uni-forms-item name="person">
										<template v-slot:label>
										    <!-- 自定义标签内容 -->
										    <view class="tag-view">
												求助人
											</view>
										  </template>
										<uni-easyinput style="min-width: 450rpx;margin-left: 20rpx; min-height: 30rpx;" v-model="valiFormData.person" placeholder="请输入姓名" />
									</uni-forms-item>
									<uni-forms-item name="contact">
										<template v-slot:label>
										    <!-- 自定义标签内容 -->
										    <view class="tag-view">
												联系方式
											</view>
										  </template>
										<uni-easyinput style="min-width: 450rpx;margin-left: 20rpx; min-height: 30rpx;" v-model="valiFormData.contact" placeholder="请输入联系方式" />
									</uni-forms-item>
									<uni-forms-item name="licensePlate">
										<template v-slot:label>
										    <!-- 自定义标签内容 -->
										    <view class="tag-view">
												车牌
											</view>
										  </template>
										<uni-easyinput style="min-width: 450rpx;margin-left: 20rpx; min-height: 30rpx;" v-model="valiFormData.licensePlate" placeholder="请输入车牌号" />
									</uni-forms-item>
									<uni-forms-item name="description">
										<template v-slot:label>
										    <!-- 自定义标签内容 -->
										    <view class="tag-view">
												描述
											</view>
										  </template>
										<uni-easyinput style="min-width: 450rpx;margin-left: 20rpx; min-height: 30rpx;" type="textarea" v-model="valiFormData.description" placeholder="请准确描述当前的状况及所需要的帮助" />
									</uni-forms-item>
								</uni-forms>
								<view class="btn">
									<button style="min-height: 60rpx; border-radius: 45rpx; background-color: #ff7438;" type="primary" @click="submit('valiForm')">呼叫救援</button>
								</view>
								<view class="record">
									<navigator open-type="navigate" class="text-sty" url="/pages/ResucueRecord/ResucueRecord">
										救援记录
									</navigator>
									<view class="arrow">
										
									</view>
								</view>
						</view>
					</view>
				</view>
			<!-- </uni-section> -->
		</view>
		
	<view class="total-con">
		<view class="tag-text">
			警务救助
		</view>
		<view class="func-btn">
			<view class="func-card">
				<image src="/static/c1.png" mode=""></image>
				<view class="text-desc">
					<view>
						交通事故
					</view>
					<view>
						122
					</view>
				</view>
			</view>
			<view class="func-card">
				<image src="/static/c1.png" mode=""></image>
				<view class="text-desc">
					<view>
						公交报警
					</view>
					<view>
						119
					</view>
				</view>
			</view>
			<view class="func-card">
				<image src="/static/c1.png" mode=""></image>
				<view class="text-desc">
					<view>
						急救中心
					</view>
					<view>
						120
					</view>
				</view>
			</view>
			<view class="func-card">
				<image src="/static/c1.png" mode=""></image>
				<view class="text-desc">
					<view>
						公交报警
					</view>
					<view>
						110
					</view>
				</view>
			</view>
		</view>
		</view>
		
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref,
		reactive 
	} from 'vue'

	const mapData = ref({
		id: 0, // 使用 marker点击事件 需要填写id
		title: 'map',
		latitude: 39.909,
		longitude: 116.39742,
		covers: [{
			latitude: 39.909,
			longitude: 116.39742,
			iconPath: '../../../static/location.png'
		}, {
			latitude: 39.90,
			longitude: 116.39,
			iconPath: '../../../static/location.png'
		}]
	})

	const getPosition = () => {
		uni.getLocation({
			type: 'wgs84',
			success: function(res) {
				console.log(res);
				mapData.value.latitude = res.latitude;
				mapData.value.longitude = res.longitude;
			}
		})
	}

	// / 响应式数据
	const items = ref(['搭电', '换胎', '拖车'])
	const styles = ref([{
			value: 'button',
			text: '按钮',
			checked: true
		},
		{
			value: 'text',
			text: '文字'
		}
	])
	const colors = ref(['#007aff', '#4cd964', '#dd524d'])
	const current = ref(0)
	const colorIndex = ref(0)
	const activeColor = ref('#007aff')
	const styleType = ref('text')

	// 方法
	const onClickItem = (e) => {
		if (current.value !== e.currentIndex) {
			current.value = e.currentIndex
		}
	}

// / 表单数据
const valiFormData = reactive({
	startPoint: '',
    endPoint: '',
	localtion:'',
    person: '',
    contact: '',
    licensePlate: '',
    description: ''
})

// // 表单验证规则
// const rules = reactive({
//   name: {
//     rules: [{
//       required: true,
//       errorMessage: '姓名不能为空'
//     }]
//   },
//   age: {
//     rules: [{
//       required: true,
//       errorMessage: '年龄不能为空'
//     }, {
//       format: 'number',
//       errorMessage: '年龄只能输入数字'
//     }]
//   }
// })

// 表单引用
const valiForm = ref(null)

// 表单提交方法
const submit = (ref) => {
  // valiForm.value.validate().then(res => {
  //   console.log('校验通过', res)
  //   uni.showToast({
  //     title: '校验通过'
  //   })
  //   // 这里可以添加提交表单的逻辑
  // }).catch(err => {
  //   console.log('校验失败', err)
  // })
}


	onMounted(() => {
		getPosition()
	})
</script>

<style scoped lang="scss">
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.title-tbar {
		background-color: #3486fd;
		min-height: 320rpx;
		color: white;
		text-align: center;
		padding: 20rpx;
	}

	.map-temp {
		background-color: white;
		// min-height: 400rpx;
		min-width: 690rpx;
		margin: 0 10rpx;
		top: 0;
		left: 0;
		right: 0;
		margin-top: -180rpx;
		position: relative;
		box-shadow: 12, 4, 5, 10, 9, 10;
		/* z-index: 1000; */
		border-radius: 20rpx;
		padding: 20rpx;
	}

	.map-sty {
		width: 100%;
		height: 190px;
	}

	.opera-area {
		min-width: 700rpx;
		margin: 0 20rpx;
		margin-top: -15rpx;
		min-height: 400rpx;
		border-radius: 20rpx;
		background-color: antiquewhite;
	}
	
	
	/* 选项卡 */
	.example-body {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			padding: 0;
		}
	
		.uni-common-mt {
			margin-top: 30px;
		}
	
		.uni-padding-wrap {
			// width: 750rpx;
			padding: 0px 30px;
		}
	
		.content {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			justify-content: center;
			align-items: center;
			min-height: 200px;
			text-align: center;
		}
	
		.content-text {
			font-size: 14px;
			color: #666;
		}
	
		.color-tag {
			width: 25px;
			height: 25px;
		}
	
		.uni-list {
			flex: 1;
		}
	
		.uni-list-item {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex: 1;
			flex-direction: row;
			background-color: #FFFFFF;
		}
	
	
		.uni-list-item__container {
			padding: 12px 15px;
			width: 100%;
			flex: 1;
			position: relative;
			/* #ifndef APP-NVUE */
			display: flex;
			box-sizing: border-box;
			/* #endif */
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			border-bottom-style: solid;
			border-bottom-width: 1px;
			border-bottom-color: #eee;
		}
	
		.uni-list-item__content-title {
			font-size: 14px;
		}
		
		
		
		
		/* 调整选项卡间距 - 推荐方案 */
			
			::v-deep .uni-segmented-control {
				display: flex;
				justify-content: space-between;
				gap: 20rpx; /* 选项间距 */
			}
			
			::v-deep .uni-segmented-control__item {
				flex: 1;
				margin: 0 !important;
				min-width: 0; /* 防止内容溢出 */
			}
			
			/* 响应式调整 */
			@media (max-width: 375px) {
				::v-deep .uni-segmented-control {
					gap: 15px;
				}
				.uni-padding-wrap {
					padding: 0 1px;
				}
			}
			
			
			
			
			
// 表单

	.example {
		padding: 15px;
		// background-color: #fff;
	}

	.segmented-control {
		// margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	
	.button {

		display: flex;
		align-items: center;
		margin-top: 120rpx;
		height: 30px;
		margin-left: 10px;
	}
	
	
	.tag-view{
		
		background-color: #4fa2ff;
		border-radius: 30rpx;
		min-width: 160rpx;
		height: 60rpx;
		line-height: 60rpx;
		color: white;
		font-size: 22rpx;
		// padding: 13rpx 0;
		margin-left: -10rpx;
		margin-top: 3rpx;
	
	}
	
	
	.input-sty{
		border-radius: 30rpx;
	}
	
	.record{
		display: flex;
		justify-content: center;
		margin-top: 25rpx;
		line-height: 20rpx;
	}
	.text-sty{
		color: #a4a4a4;
	}
	.arrow{
		// border: 2rpx solid #a4a4a4;
		border-top: 1rpx solid #a4a4a4;
		border-right: 1rpx solid #a4a4a4;
		min-height: 20rpx;
		min-width: 20rpx;
		transform: rotate(45deg);
		
		// margin-top: 8rpx;
	}
	
	.total-con{
		background-color: white;
		margin-top: 20rpx;
		padding: 20rpx 20rpx;
	}
	.func-btn{
		display: flex;
		justify-content: space-around;
	}
	.func-card{
		
		min-width: 130rpx;
		min-height: 140rpx;
		background-color: #4fa2ff;
	}
	.func-card>image{
		width: 70%;
		height: 70%;
	}
	.text-desc{
		min-height: 50rpx;
		
		text-align: center;
	}
	.tag-text{
		margin-left: 20rpx;
		margin-bottom: 20rpx;
		
	}
	
</style>